<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <el-card>
        <el-row>
          <el-col>
            <div class="header"><i class="el-icon-info" /> 共{{ total }}条员工记录</div>

          </el-col>
          <el-col :span="6"> <el-button type="primary" size="small" @click="exportFn">导出表格</el-button>

          </el-col></el-row>
      </el-card>
      <!-- 表格部分 :data="tableData" prop="address"-->
      <el-card>
        <!-- 表格 -->
        <el-table border style="width: 100%" stripe :data="tableData" height="460px">
          <el-table-column type="index" label="序号" width="80" align="center" />
          <el-table-column prop="username" label="员工名称" width="165" align="center" />
          <el-table-column prop="email" label="邮箱" width="165" align="center" />
          <el-table-column prop="image" label="头像" width="205" align="center">
            <template v-slot="{row}">
              <img v-imgerror="require('./images/dog.png')" :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="165" align="center">
            <template v-slot="{row}">
              <p v-changTime="row.created_at" />
            </template>
          </el-table-column>
          <el-table-column prop="updated_at" label="更新时间" width="165" align="center">
            <template v-slot="{row}">
              <p v-changTime="row.updated_at" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
              <el-button v-if="assignPerm('edit-but')" type="primary" size="small" @click="edit(row.id)">编辑</el-button>
              <el-button v-if="assignPerm('allot-but')" type="success" size="small" @click="assignRole(row.id)">角色分配</el-button>
              <el-button v-if="assignPerm('dele-but')" type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          background
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"

          @current-change="handleCurrentChange"
        />
      </el-card>
      <!-- 编辑员工弹框 -->
      <editEmployee ref="editEmployee" :dialog-visible.sync="dialogVisible" @editEmployee="editEmployee" />
      <!-- 分配角色弹框 -->
      <assignRole ref="assignRole" :show.sync="show" :user-id="curId" @editEmployee="editEmployee" />
    </div>
  </div>
</template>

<script>

import { getEmployeesList, getEmployeesListCount, delEmployees } from '@/api/employees'

import editEmployee from './component/editEmployee.vue'
import assignRole from './component/assign-role.vue'

import { export_json_to_excel } from '@/vendor/Export2Excel'

export default {
  components: {
    editEmployee,
    assignRole
  },
  data() {
    return {
      tableData: [],
      limit: 3,
      start: 0,
      total: 0,
      dialogVisible: false,
      show: false,
      curId: '',
      currentPage: 1

    }
  },
  created() {
    getEmployeesListCount().then((res) => {
      this.total = res
    })

    this.getEmployeesList()
  },
  methods: {
    // 分配角色
    assignRole(id) {
      this.show = true
      this.curId = id
      this.$refs.assignRole.getEmployeesById(id)
    },
    // 导出员工函数
    async  exportFn() {
      const res = await getEmployeesList({
        _limit: 10000,
        _start: this.start
      })
      const result = res.map(item => {
        return this.objToArr(item)
      })
      console.log(93, res)
      const header = ['员工名称', '邮箱', '创建时间', '更新时间']
      export_json_to_excel({
        header: header,
        data: result
      })
    },
    // 对象转数组
    objToArr(item) {
      const arr = []
      for (const key in item) {
        if (key === 'username' || key === 'email') {
          arr.push(item[key])
        } else if (key === 'created_at' || key === 'updated_at') {
          arr.push(item[key].split('T')[0])
        }
      }
      return arr // 数组里面的单个元素
    },
    // 编辑员工
    editEmployee() {
      this.getEmployeesList()
    },
    // 删除员工
    delFn(id) {
      this.$confirm('确定删除此员工嘛？', '删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1) {
          this.currentPage -= 1
          this.start = (this.currentPage - 1) * 3
        }
        await delEmployees(id)
        this.$message.success('删除员工成功')

        this.getEmployeesList()

        getEmployeesListCount().then((res) => {
          this.total = res
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    // 编辑员工
    edit(id) {
      this.dialogVisible = true
      this.$refs.editEmployee.getEmployeesById(id)
    },

    // 分页器页面选择
    handleCurrentChange(val) {
      this.currentPage = val
      this.start = (val - 1) * 3
      this.getEmployeesList()
    },
    // 获取员工列表
    async  getEmployeesList() {
      this.tableData = await getEmployeesList({
        _limit: this.limit,
        _start: this.start
      })
      console.log('员工61', this.tableData)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin-bottom: 10px;
}
.el-row{
  display: flex;
  justify-content: space-between;
}
.header{
  width: 155px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 10px;
  background-color: rgba(182, 231, 200,.5);
  .el-icon-info{
    color: pink;

  }

}
  .el-col-6{
   padding-top: 5px;
  }
  .el-table::v-deep{
    margin-bottom: 10px;
      th>.cell{
    color: skyblue;
  }
  img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  }
.el-pagination{
  margin-left: 460px;
}
</style>

